<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02盒模型</title>
    <style>
        .box1{
            width: 188px;
            height: 188px;
            background-color: red;
            border: blue 18px solid;
            border-bottom: green 28px double;
            border-width: 9px;
            border-style: solid;
            border-color: black;
            border-radius: 22px 18px 9px;
            border-bottom-left-radius: 18px;
            
            
                        
    </style>

           

          
</head>
<body>
    <!-- 
        盒模型（box model）、盒子模型、框模型
            ——css将页面中的元素都设置为一个矩形盒子；
            ——将元素设置为盒子之后，网页布局就变成了将不同的矩形盒子（元素）放到不同位置；
            ——每一个盒子由以下几个部分组成。
                内容（conten）、边框（border）、内边距（padding）、外边距（margin）
        内容区
            ——元素中的所有子元素和内容都在内容区中排列
            ——内容区有以下属性：
                    width height background
        边框（border）
            ——边框最少三个属性：
                · border-width 边框宽度 可以使用几个值。
                顺时针排位，没有的找对边；
                · border-color 边框颜色
                · border-style 边框样式
                （以上方式不常用）
            ——边框简用方式
                ·border直接设置宽度、颜色、样式、不区分顺序
                ·也可以指定边框某一边
                    border-top/right/bottom/left

     -->


     <div class="box1">这是一个块元素</div>
    
</body>
</html>